<template>
  <div class="wrapper">
    <div class="form">
      <div style="height: 60px">
        <div class="title">完善注册信息</div>
      </div>
      <hr>
      <div class="form-item">
        <div>用户名*:</div>
        <el-input class="input" v-model="pack.username" placeholder="username..."></el-input>
      </div>
      <div class="form-item">
        <div>密码*:</div>
        <el-input class="input" v-model="pack.password" placeholder="password..." show-password></el-input>
      </div>
      <div class="form-item">
        <div>重复密码*:</div>
        <el-input class="input" v-model="passwordRepeat" placeholder="repeat password..." show-password></el-input>
      </div>
      <div class="form-item">
        <div>邮箱:</div>
        <el-input class="input" v-model="pack.emailAddress" placeholder="E-mail..."></el-input>
      </div>
      <div class="form-item" style="height: auto;flex-direction: row-reverse">
        <el-checkbox id="checkbox" v-model="checked" title="勾选此项表示允许我们向您发送推广邮件">勾选此项表示允许我们向您发送推广邮件</el-checkbox>
<!--        <div ></div>-->
      </div>
      <div class="form-item">
        <el-button type="primary" @click="onRegister()" style="width: 100%">下一步</el-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.wrapper{
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background-image: none;
}
.form{
  width: 80%;
  height: 80%;
}
.form-item{
  height: 55px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}
.input{
  width: 75%;
}
.title{
  font-weight: bold;
  font-size: 30px;
}
hr{
  margin-bottom: 20px;
  height: 3px;

  background-color: black;
  border: none;
}
#checkbox{
  font-size: 10px !important;
}

</style>

<script>
export default {
  name:'component_register_implement',
  data(){
    return{
      pack:{
        username:'',
        password:'',
        emailAddress:''
      },
      checked:false,
      passwordRepeat:'',
    }
  },
  methods:{
    onRegister(){
      let validate=async()=>{
        return new Promise((resolve, reject) => {
          if (this.pack.password!==this.passwordRepeat){
            reject('两次密码输入不一致')
          }
          resolve();
        })
      }

      validate().then(()=>{
        //成功跳转login
        this.$store.dispatch('register',this.pack).then(()=>{
          this.$router.push('/login').then(r => {

          });
        }).catch((e)=>{
          //处理post注册的error
          this.$message.error(e);
        })
      }).catch((e)=>{
        //处理validate的error
        this.$message.error(e);
      })

    }
  },
  mounted() {

  },
  created() {

  }
}
</script>
